/* css for the labels on the tissue check boxes */

body {background-color : black;}

@media screen and (orientation: landscape) {

	.grid 	{
		display: grid;
		height: 100vh;
		width: 100vw;
		grid-template-areas : 	
								"header"
								"didactic"
								"footer";
								
		grid-template-columns: 100%;
		grid-template-rows: 5% 90% 5%;
			
		}
		
		
	
		#content_wrapper {

			border-top: solid;
			border-bottom: solid;
			position: relative;
			height : 90vh;
			overflow: hidden;
	

			/* Prevent native touch events on Windows */
			-ms-touch-action: none;

			/* Prevent the callout on tap-hold and text selection */
			-webkit-touch-callout: none;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;

			/* Prevent text resize on orientation change, useful for web-apps */
			-webkit-text-size-adjust: none;
			-moz-text-size-adjust: none;
			-ms-text-size-adjust: none;
			-o-text-size-adjust: none;
			text-size-adjust: none;
		}
		
}
	
		
@media screen and (orientation: portrait) {
		
.grid  	{
		display: grid;
		height: 100vh;
		width: 100vw;
		grid-template-areas : 	
								"header"
								"didactic"
								"footer";
								
		grid-template-columns: 100%;
		grid-template-rows: 5% 90% 5%;
					
		}

 	
#content_wrapper {

	border-top: solid;
	border-bottom: solid;
	position: relative;


	height : 90vh;
	margin-top: 0px;;
	margin-left: 0px;;
	margin-right: 0px;
	margin-bottom: 1px;
	overflow: hidden;
	

	/* Prevent native touch events on Windows */
	-ms-touch-action: none;

	/* Prevent the callout on tap-hold and text selection */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	/* Prevent text resize on orientation change, useful for web-apps */
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	-o-text-size-adjust: none;
	text-size-adjust: none;
}


}
		
	

#header {
	grid-area: header;
	display : flex;
	align-items: center;
	justify-content : center;
	
	}
	
	
	
#footer {
	grid-area: footer;
	display : flex;
	align-items: center;

	}
	
		
#didactic {
	grid-area : didactic;

}


	


#content {
	position: absolute;
	padding-top:10px;
	padding-right:25px;
	padding-left:25px;
	padding-bottom: 10px;
	background: #fff;
	color: #000000;
		font-family: Thonburi, Arial, sans-serif;
    font-size  :   125% ;

	/* Prevent elements to be highlighted on tap */
	-webkit-tap-highlight-color: rgba(0,0,0,0);

	/* Put the scroller into the HW Compositing layer right from the start */
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
}




/* 
.slider input {
	margin-top:10%;
	-webkit-transform:rotate(90deg);
	-moz-transform:rotate(90deg);
	-o-transform:rotate(90deg);
	transform:rotate(270deg);
	}
 */